<title>用户管理</title>
  
<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a lay-href="">主页</a>
    <a><cite>用户</cite></a>
    <a><cite>用户管理</cite></a>
  </div>
</div>

<div class="layui-fluid">   
  <div class="layui-card">
    <div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="layadmin-useradmin-formlist">
      <div class="layui-form-item">

        <div class="layui-inline">
          <label class="layui-form-label">性别</label>
          <div class="layui-input-block">
            <select name="sex">
              <option value="0">女</option>
              <option value="1">男</option>
              <option value="2">未知</option>
            </select>
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">用户级别</label>
          <div class="layui-input-block">
            <select name="level">
              <option value="0" >普通用户</option>
              <option value="1">普通会员</option>
              <option value="4">封禁</option>
            </select>
          </div>
        </div>

        <div class="layui-inline">
          <label class="layui-form-label">创建时间</label>
          <div class="layui-input-inline">
            <label for="startTime">
              <input type="text" class="layui-input" name="startTime" id="startTime" placeholder="开始时间">
            </label>
          </div>
        </div>
        <div class="layui-inline">
          <div class="layui-input-inline">
            <label for="endTime">
              <input type="text" class="layui-input" name="endTime" id="endTime" placeholder="结束时间">
            </label>
          </div>
        </div>

        <div class="layui-inline">
      <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="LAY-user-back-search">
        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
      </button>
    </div>
    </div>
    </div>
    
    <div class="layui-card-body">
      <div style="padding-bottom: 10px;">
        <button class="layui-btn layuiadmin-btn-admin" data-type="batchdel">删除</button>
        <button class="layui-btn layuiadmin-btn-admin" data-type="add">添加</button>
      </div>
      
      <table id="LAY-user-back-manage" lay-filter="LAY-user-back-manage"></table>  
      <script type="text/html" id="table-useradmin-admin">
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
      </script>
    </div>
  </div>
</div>

<script>
layui.use('useradmin', layui.factory('useradmin')).use(['admin', 'useradmin', 'table'], function(){
  var $ = layui.$
  ,admin = layui.admin
  ,view = layui.view
  ,table = layui.table
  ,form = layui.form;
  
  form.render(null, 'layadmin-useradmin-formlist');
  
  //监听搜索
  form.on('submit(LAY-user-back-search)', function(data){
    var field = data.field;
    console.log(field);
    var sex = field.sex;
    var level = field.level;
    var startTime = field.startTime;
    var endTime = field.endTime;
    console.log(startTime);
    //执行重载
    table.reload('LAY-user-back-manage', {
      url:'/backstage/pageLimit',
      where: {
        sex:sex,
        level:level,
        startTime:startTime,
        endTime:endTime
      },page: {
        curr:1
      }
    });
  });

  //事件  批量删除
  var active = {
    batchdel: function(){
      var checkStatus = table.checkStatus('LAY-user-back-manage')
      ,checkData = checkStatus.data; //得到选中的数据
      if(checkData.length === 0){
        return layer.msg('请选择数据');
      }
        layer.confirm('确定删除吗？', function(index) {
          var arr = checkStatus.data;  //得到选中数据的数组
          //遍历数组，获得id的数组
          var idArr=[];
          for (var i = 0; i < arr.length; i++) {
            idArr[i]=arr[i].id;
          }
          console.log(idArr);
          //执行 Ajax 后重载
          $.ajax({
            url:'/backstage/deleteBatch',
            dataType:'json',
            data:{"idArr":idArr},
            traditional: true,
            success:function (info) {
              console.log(info);
              if(info.code==="200"){
                layui.table.reload('LAY-user-back-manage'); //重载表格
                layer.msg('已删除');
              }else{
                layer.msg('删除失败');
              }
            }
          })
        });
    }
    ,add: function(){    //添加数据
      admin.popup({
        title: '添加'
        ,area: ['420px', '500px']
        ,id: 'LAY-popup-useradmin-add'
        ,success: function(layero, index){
          view(this.id).render('user/administrators/addUser').done(function(){
            form.render(null, 'layuiadmin-form-admin');
            
            //监听提交
            form.on('submit(LAY-user-back-submit)', function(data){
              var field = data.field; //获取提交的字段
              console.log(field);
              var username = field.username;//提取用户名
              var password = field.password;  //提取密码
              var nickname = field.nickname;   //提取名字
              var sex = field.sex;
              var email = field.email;
              var phone = field.phone;
              //提交 Ajax 成功后，关闭当前弹层并重载表格
              $.ajax({
                url:'/backstage/addUser',
                dataType:'json',
                data:{"username":username,"password":password,"nickname":nickname,
                  "sex":sex,"email":email,"phone":phone},
                success:function (info) {
                  if (info.code==="200"){
                    layui.table.reload('LAY-user-back-manage'); //重载表格
                    layer.msg("添加成功");
                    layer.close(index); //执行关闭
                  }else{
                    layer.msg("添加失败");
                    layer.close(index); //执行关闭
                  }
                }
              });
            });
          });
        }
      });
    }
  }  
  $('.layui-btn.layuiadmin-btn-admin').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });
});
</script>
<script>
  layui.use('laydate', function() {
    var laydate = layui.laydate;
    /*加载日历*/
    laydate.render({
      elem: '#startTime'
      ,type: 'datetime'
    });
    laydate.render({
      elem: '#endTime'
      ,type: 'datetime'
    });
  });
</script>
